<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple" style="margin-top: 50px">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="开始时间" prop="start">
              <el-date-picker
                v-model="ruleForm.start"
                type="datetime"
                placeholder="选择开始日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end">
              <el-date-picker
                v-model="ruleForm.end"
                type="datetime"
                placeholder="选择结束日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="选择会议室" prop="conference">
              <el-select v-model="ruleForm.conference" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.room_lager"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开会人数" prop="number">
              <el-input v-model.number="ruleForm.number"></el-input>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>

        </div>
      </el-col>
      <el-col :span="14" :offset="2">
        <div class="grid-content bg-purple-light" style="margin-top: 50px">
          <div class="block" style="text-align: left;margin-bottom: 20px">
            <el-date-picker
              v-model="search.start"
              type="datetime"
              placeholder="会议开始时间">
            </el-date-picker>

            <el-date-picker
              style="margin-left: 10px;margin-right: 10px"
              v-model="search.end"
              type="datetime"
              placeholder="会议结束时间">
            </el-date-picker>
            <el-button type="success" @click="searchFerence()">搜索会议室</el-button>
          </div>
          <el-table
            height="350"
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="start"
              label="开始时间"
            >
              <template slot-scope="scope">
                {{ scope.row.start|dataFMT('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="end"
              label="结束时间"
            >
              <template slot-scope="scope">
                {{ scope.row.end|dataFMT('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="room"
              label="会议室号">
            </el-table-column>
            <el-table-column
              prop="part"
              label="使用部门">
            </el-table-column>
          </el-table>

          <div class="pagenation">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="total"
              :page-size="page_size"
              @prev-click="prevfun"
              @next-click="nextfun"
              @current-change="currentchange"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'ApplyConferenceView',
    data () {
      var start = (rule, value, callback) => {
        if (!value || value === '') {
          return callback(new Error('开始时间不能为空'))
        }
        callback()
      }
      var end = (rule, value, callback) => {
        if (value === '' || !value) {
          callback(new Error('结束时间不能为空'))
        }
        if (this.ruleForm.start >= this.ruleForm.end) {
          callback(new Error('开始时间不能晚于结束时间'))
        }
        callback()
      }
      var number = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('开会人数不能为空'))
        }
        callback()

      }
      var conference = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('会议室不能为空'))
        }
        callback()
      }
      return {
        tableData: [],
        search: {
          start: '',
          end: ''
        },
        page_size: '',
        total: '',
        value: '',
        options: [],
        ruleForm: {
          start: '',
          end: '',
          number: '',
          conference: ''
        },
        rules: {
          conference: [{
            validator: conference,
            trigger: 'blur'
          }],
          start: [
            {
              validator: start,
              trigger: 'blur'
            }
          ],
          end: [
            {
              validator: end,
              trigger: 'blur'
            }
          ],
          number: [
            {
              validator: number,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    mounted () {
      this.get_evection()
      this.get_conference()
    },
    methods: {
      searchFerence (page=1) {
        if(this.search.start===''){}

        else if(this.search.start>=this.search.end){
          this.$message.error('会议开始时间必须小于结束时间')
          return
        }
        var start =  this.$moment(this.search.start).format('YYYY-MM-DD HH:mm:ss')
        var end = this.$moment(this.search.end).format('YYYY-MM-DD HH:mm:ss')
        this.$axios({
          url: this.$settings.base_url + `/user/applyconference/?type=1&page=${page}&start=${start}&end=${end}`,
          method: 'get',
        }).then(res => {
          this.tableData = res.data.results
          this.page_size = res.data.page_size
          this.total = res.data.count

          this.$message.success('搜索成功')

          // this.search = {
          //   start: '',
          //   end: ''
          // }

        })

      },
      get_conference(){
        this.$axios({
          url:this.$settings.base_url+'/user/conference/?type=1',
          method:'get'
        }).then(res=>{
          this.options=res.data.data

        })
      },
      //拿到申请的会议室的数据
      get_evection (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/applyconference/?page=${page}&type=3`,
          method: 'get'
        }).then(res => {
          this.tableData = res.data.results
          this.page_size = res.data.page_size
          this.total = res.data.count
        })
      },
      //申请会议室进行开会
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
              url: this.$settings.base_url + `/user/applyconference/`,
              method: 'post',
              data: this.ruleForm
            }).then(res => {
              if (res.data.code === 100) {
                this.$message.success('创建成功')
                 this.get_evection()
                this.ruleForm = {
                  start: '',
                  end: '',
                  number: '',
                  conference: ''
                }
              } else {
                this.$message.error(res.data.error)
                this.ruleForm.start = ''
                this.ruleForm.end = ''
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_evection(value)
        this.searchFerence(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_evection(value)
        this.searchFerence(value)
      },
      currentchange (value) {
        this.get_evection(value)
        this.searchFerence(value)

      },
    }

  }
</script>

<style scoped>

</style>
